<template>
  <div>
    <searchBar type='3'title='网易严选' />
    <div class="logo">
      <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png">
    </div>
    <div class="containerWrap">
      <div class="container">
        <div class="iptWrap">
          <input v-model="phone" class="ipt" type="tel" maxlength="11" spellcheck="false" tabindex="1" autocomplete="off" name="email" placeholder="请输入手机号" id="phoneipt">
        </div>
        <div class="iptWrap">
          <van-field
              v-model="code"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button size="small" type="primary" @click="getCode">发送验证码</van-button>
              </template>
            </van-field>
        </div>
        <div class="iptWrap">
          <input v-model="password" class="ipt" data-placeholder="密码" name="password" maxlength="50" data-required="true" type="password" autocomplete="new-password" data-max-length="50" tabindex="2" spellcheck="false" placeholder="请输入密码">
        </div>
        <div class="iptWrap">
          <input v-model="re_password" class="ipt" data-placeholder="密码" name="password" maxlength="50" data-required="true" type="password" autocomplete="new-password" data-max-length="50" tabindex="2" spellcheck="false" placeholder="确认密码">
        </div>
          <button id="login" @click="toPhoneLogin">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import {reqSendCode,reqRegister} from '@/api/Register'
  export default {
    name:'Register',
    data() {
        return {
            phone:'',
            password:'',
            re_password:'',
            code:''
        }
    },
    methods:{
      async getCode(){
        let result = await reqSendCode(this.phone)
        if(result.code === 200){
          alert(`验证码获取成功:${result.data}`)
          this.code = result.data
        }else{
          alert('获取失败')
        }
      },
      async toPhoneLogin(){
        const {phone,code,password} = this
        let result = await reqRegister({phone,code,password})
        if(result.code === 200){
          alert('注册成功') 
          this.$router.push('/phonelogin')   
        }else{
          alert('注册失败,'+result.message)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .logo{
    text-align: center;
    margin-top: .56rem;
    margin-bottom: 0;
    img{
        width: 2.68rem;
        height: .9rem;
    }
  }
  .container{
    position: relative;
    padding-bottom: 1.2rem;
    margin: 0 auto;
    padding-top: 1.6rem;
    .iptWrap{
      margin-left: .86rem;
      width: 8.27rem;
      height: 44px;
      border-bottom:1px solid rgb(228, 218, 218);
      .ipt{
        width: 8.27rem;
        height: 0.6rem;
        font-size: 0.4rem;
        line-height: 0.6rem;
        margin: 0.39rem 0;
        padding-left: 0;
        -webkit-tap-highlight-color: transparent;
        letter-spacing: normal;
        color: #333;
        border: 0;
        background: #fff;
        font-size: 12px;
      }
    }
    #login{
      width: 8.27rem;
      height: 1.28rem;
      font-size: 0.4rem;
      border-radius: 3px;
      color: #fff;
      background: #DD1A21;
      text-indent: 0;
      text-align: center;
      display: block;
      border: none;
      margin:auto;
      margin-top: 30px;
    }
  }
</style>

<style lang="less">
  .iptWrap{
    .van-field{
      margin-right: 20px;
      width: 8.27rem;
      height: 44px;
      font-size: 12px;
      color: #333;
      padding-left: 0;
    }
  }
</style>